<!--
 * @Author: 王灿
 * @Date: 2019-11-09 00:40:05
 * @LastEditTime: 2020-03-18 19:27:24
 * @Description: 订单中心
 * @FilePath: \scarlet-sparrow-admin\src\views\order\index
-->
<template>
  <div class="public">
    <!-- header -->
    <jq-title :title="title" />
    <!-- 导出 -->
    <form
      id="ajaxForm"
      method="post"
      enctype="multipart/form-data"
      class="public-export"
    >
      <el-button type="danger" size="mini" @click="onExport">导出</el-button>
    </form>
    <!-- 订单列表 -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="public-table">
        <!-- 收件人 -->
        <el-table-column prop="consignee" label="收件人"></el-table-column>
        <!-- 收件地址 -->
        <el-table-column label="收件地址">
          <template slot-scope="scope">
            <jq-tooltip :content="scope.row.receiveAddress" />
          </template>
        </el-table-column>
        <!-- 商品价格 -->
        <el-table-column prop="productPrice" label="商品价格"></el-table-column>
        <!-- 商品数量 -->
        <el-table-column
          prop="productNumber"
          label="商品数量"
        ></el-table-column>
        <!-- 付款金额 -->
        <el-table-column prop="price" label="付款金额"></el-table-column>
        <!-- 物流名称 -->
        <!-- <el-table-column prop="price" label="物流名称"></el-table-column> -->
        <!-- 物流单号 -->
        <el-table-column prop="expressNum" label="物流单号">
          <template slot-scope="scope">
            <span>{{ scope.row.expressNum || '----' }}</span>
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <div class="public-table__status-wrapper">
              <span :class="orderStatus[scope.row.status].className"></span>
              <span>{{ orderStatus[scope.row.status].label }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <el-button @click="onEdit(scope.row)" type="text" size="small"
              >详情</el-button
            >
            <el-button
              v-if="scope.row.status === 1"
              @click="onDeliver(scope.row)"
              type="text"
              size="small"
              class="active"
              >发货</el-button
            >
            <el-button
              v-if="scope.row.status === 3"
              @click="onManual(scope.row.id)"
              type="text"
              size="small"
              class="active"
              >结算</el-button
            >
            <el-button
              v-if="scope.row.status === 1"
              @click="onEditAddress(scope.row)"
              type="text"
              size="small"
              >修改地址</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />

    <!-- 详情 -->
    <el-dialog
      title="订单详情"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      width="600px"
    >
      <order-details
        @onCancelBtn="onCancelBtn"
        :orderDetailDTOS="orderDetailDTOS"
      />
    </el-dialog>

    <!-- 发货 -->
    <el-dialog
      title="订单发货"
      :visible.sync="isDeliver"
      :close-on-click-modal="false"
      width="600px"
    >
      <order-deliver @onCancelBtn="onCancelBtn" :orderId="orderId" />
    </el-dialog>

    <!-- 地址修改 -->
    <el-dialog
      title="地址修改"
      :visible.sync="isAddress"
      :close-on-click-modal="false"
      width="600px"
    >
      <address-edit
        @onCancelBtn="onCancelBtn"
        :orderId="orderId"
        :receiveAddress="receiveAddress"
      />
    </el-dialog>
  </div>
</template>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import JqTooltip from '@/components/jq-tooltip/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import OrderDeliver from './order-deliver/index.vue'
import OrderDetails from './order-details/index.vue'
import AddressEdit from './order-address/address-edit/index.vue'
import {
  getOrderList,
  getOrderManual,
  getExportToken,
  getOrderExport
} from '@/api/order.js'
export default {
  name: 'Order',
  components: {
    JqTitle,
    JqTooltip,
    JqPage,
    OrderDeliver,
    AddressEdit,
    OrderDetails
  },
  data() {
    return {
      title: { label: '订单中心', flag: false, searchFlag: false },
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      total: 0,
      orderId: 0,
      isShow: false,
      isDeliver: false,
      isRefresh: false,
      orderStatus: [
        { label: '待付款', className: 'public-table__status-first', status: 0 },
        {
          label: '待发货',
          className: 'public-table__status-second',
          status: 1
        },
        { label: '待收货', className: 'public-table__status-third', status: 2 },
        {
          label: '待结算',
          className: 'public-table__status-fourth',
          status: 3
        },
        { label: '已完成', className: 'public-table__status-fifth', status: 4 },
        { label: '待评价', className: 'public-table__status-first', status: 5 },
        {
          label: '待回收',
          className: 'public-table__status-second',
          status: 6
        },
        {
          label: '售后--待处理',
          className: 'public-table__status-third',
          status: 7
        },
        {
          label: '售后--处理中',
          className: 'public-table__status-fourth',
          status: 8
        },
        {
          label: '售后--处理驳回',
          className: 'public-table__status-fifth',
          status: 9
        },
        {
          label: '售后--已处理',
          className: 'public-table__status-first',
          status: 10
        },
        {
          label: '取消订单',
          className: 'public-table__status-second',
          status: 11
        }
      ],
      isAddress: false,
      receiveAddress: '',
      orderDetailDTOS: []
    }
  },
  created() {
    this.onGetOrderList()
  },
  watch: {
    // 监听页码变化
    pageNum() {
      this.onGetOrderList()
    },
    // 监听条数变化
    pageSize() {
      this.onGetOrderList()
    },
    // 监听刷新标记
    isRefresh() {
      if (this.isRefresh) {
        this.onGetOrderList()
      }
    }
  },
  methods: {
    // 订单数据
    onGetOrderList() {
      getOrderList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
    // 导出
    onExport() {
      getExportToken().then(res => {
        this.$message({
          type: 'success',
          message: '导出成功',
          onClose: () => {
            let temp = document.createElement('form')
            temp.action =
              'https://api.jiaque365.com:8087/excel/order?token=' + res.data
            temp.method = 'post'
            temp.style.display = 'none'
            document.body.appendChild(temp)
            temp.submit()
          }
        })
      })
    },
    // 父子组件传值
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
    },
    // 详情
    onEdit(row) {
      this.orderDetailDTOS = row.orderDetailDTOS
      this.isShow = true
      this.isRefresh = false
    },
    // 发货
    onDeliver(row) {
      this.orderId = row.id
      this.isDeliver = true
      this.isRefresh = false
    },
    // 结算
    onManual(id) {
      this.$confirm('结算该订单，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let form = new FormData()
          form.append('orderId', id)
          getOrderManual(form).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.onGetOrderList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 修改地址
    onEditAddress(row) {
      this.orderId = row.id
      this.receiveAddress = row.receiveAddress
      this.isAddress = true
    },
    // 取消/成功
    onCancelBtn(data) {
      this.orderId = 0
      this.orderDetailDTOS = []
      this.receiveAddress = ''
      this.isShow = false
      this.isDeliver = false
      this.isAddress = false
      this.isRefresh = data.isRefresh
    }
  }
}
</script>

<style lang="scss" scoped>
.public {
  .public-table__status-wrapper {
    width: 100%;
    height: 100%;
    @include row;
    span {
      &:first-child {
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 6px;
      }
      &.public-table__status-first {
        background: #fe5c5c;
      }
      &.public-table__status-second {
        background: #e6a23c;
      }
      &.public-table__status-third {
        background: #909399;
      }
      &.public-table__status-fourth {
        background: #409eff;
      }
      &.public-table__status-fifth {
        background: #96b327;
      }
    }
  }
  .public-export {
    padding: 0 0 10px 10px;
  }
}
</style>
